window.addEventListener('load', function () {    //保证页面加载完毕再引js
    var box = document.querySelector('.box');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 一 鼠标经过就显示隐藏mask 和 big
    box.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    box.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    // 二 鼠标移动的时候让黄色盒子随着鼠标移动、
    box.addEventListener('mousemove', function (e) {
        // 1 先算出鼠标在盒子内部的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        // 2 将鼠标在盒子内的距离赋值给mask盒子  盒子高度300的一半是150
        // 3 mask移动的距离
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // 4 如果mask盒子移动的x y 值小于0 就让盒子停留在0的位置 
        var maxX = box.offsetWidth - mask.offsetWidth;   //以盒子最左沿为基准点 maxX即是遮挡层盒子向右移动的最大距离
        var maxY = box.offsetHeight - mask.offsetHeight;  // 以盒子最上沿为基准点 maxY即是遮挡层盒子往下移动的最大值

        if (maskX <= 0) {
            maskX = 0;
        }
        else if (maskX >= maxX) {
            maskX = maxX;
        }
        if (maskY <= 0) {
            maskY = 0;
        }
        else if (maskY >= maxY) {
            maskY = maxY;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        // 遮挡层移动距离/遮挡层最大移动距离 = 大图片移动距离 /大图片最大移动距离  可以推导出 
        // 大图片移动距离=遮挡层移动距离*大图片最大移动距离 / 遮挡层最大移动距离
        // 大图
        var bigImg = document.querySelector('.bigImg');
        // 大图片的最大移动距离
        var bigMaxX = bigImg.offsetWidth - big.offsetWidth;
        var bigMaxY = bigImg.offsetHeight - big.offsetHeight;
        // 大图移动的距离
        var bigX = maskX * bigMaxX / maxX;
        var bigY = maskY * bigMaxY / maxY;
        // 反方向移动所以要加上符号就可以实现正向移动了
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';

    })

})